<template>
  <div class="home-block-comic slide-in-up">
    <h2>
      <span>{{ title }}</span>
      <!-- <div class="hover">{{ Eng }}</div> -->
    </h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "HomeBlockComic",
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    Eng: {
      type: String,
      default: "",
    },
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.home-block-comic {
  position: relative;
  width: 100%;
  max-width: 1800px;
  h2 {
    .hover {
      opacity: 0.2;
      background: -webkit-linear-gradient(
        90deg,
        transparent,
        var(--primary-color)
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      white-space: nowrap;
      position: absolute;
      left: 0;
      bottom: 0;
      font-size: 38px;
      z-index: 1;
      font-weight: 800;
    }
  }
}
</style>
